<template>
  <div class="demo">
    <code-container
      :code="thisCode"
      v-on:close="isShowCode = false"
      v-if="isShowCode"
    ></code-container>

    <data-v-panel>
      <template slot="title">
        数字组件
        <a href="JavaScript:;" class="look-code" @click="lookCode('digit')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-digit :num="num" width="50" height="50">
          <!-- <div slot="header">￥</div> -->
          <!-- <div slot="footer">元</div> -->
        </data-v-digit>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template slot="title">
        数字翻页组件
        <a
          href="JavaScript:;"
          class="look-code"
          @click="lookCode('digit-paging')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-digit-paging :num="num"></data-v-digit-paging>
      </template>
    </data-v-panel>
    <data-v-panel>
      <template slot="title"> 数字翻页组件-类型2 </template>
      <template slot="body">
        <data-v-digit-paging :num="num" type="2"></data-v-digit-paging>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template slot="title">
        排名组件
        <a href="JavaScript:;" class="look-code" @click="lookCode('rank')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-rank :list="rank"></data-v-rank>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template slot="title">
        下拉框
        <a href="JavaScript:;" class="look-code" @click="lookCode('select')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-select :options="options" style="width: 50%"></data-v-select>
        <data-v-select :options="options" style="width: 50%"></data-v-select>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template slot="title">
        按钮
        <a href="JavaScript:;" class="look-code" @click="lookCode('btn')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-btn type="default">按钮组件</data-v-btn>
        <br />
        <data-v-btn type="primary">按钮2</data-v-btn>
        <br />
        <data-v-btn type="warning">按钮3</data-v-btn>
        <br />
        <data-v-btn type="disabled">按钮4</data-v-btn>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template slot="title">
        地图
        <a href="JavaScript:;" class="look-code" @click="lookCode('amap')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-amap style="height: 200px"></data-v-amap>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template slot="title">
        数据块
        <a href="JavaScript:;" class="look-code" @click="lookCode('dblock')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-dblock :dataList="dataList"></data-v-dblock>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template slot="title">
        时钟
        <a href="JavaScript:;" class="look-code" @click="lookCode('clock')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-clock color="cyan"></data-v-clock>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template slot="title">
        标题
        <a href="JavaScript:;" class="look-code" @click="lookCode('header')"
          >代码</a
        >
      </template>
      <template slot="body">
        <span>请选择类型：</span>
        <data-v-select
          :options="optionsHead"
          @selected="onSelect"
          style="width: 200px; margin-bottom: 20px"
        ></data-v-select>
        <!--
        * @params { Number,String } imgType--背景样式选择
        * @params { Function } imgStyle -- 背景样式 返回一个对象
        * @params { String } title -- 主标题
        * @params { Function } titleStyle -- 主标题样式 返回同背景图
        * @params { Boolean } isTime -- 是否显示时间 ture 显示 默认false
        * @params { Object } time_position -- 时间位置样式
        * @params { String } logoUrl -- logo路径
        * @params { Function } logoStyle -- logo样式返回同背景图
        * @params { slot } 
        *   v-slot:head_left  左边卡槽
        *   v-slot:head_right 右边卡槽
        -->

        <data-v-head
          :imgType="imgType"
          :imgStyle="imgFunc"
          title="xxx平台数据分析展板"
          :titleStyle="titleFuc"
          :isTime="false"
          :time_position="{ left: '120px' }"
          :logoUrl="logo"
          :logoStyle="logoFuc"
        >
          <template v-slot:head_left>
            <div></div>
          </template>
          <template v-slot:head_right>
            <div>右侧占位文字...</div>
          </template>
        </data-v-head>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template slot="title">
        滑动切换tab
        <a href="JavaScript:;" class="look-code" @click="lookCode('tab')"
          >代码</a
        >
      </template>
      <template slot="body">
        <span style="font-size: 13px; margin: 5px">类型切换</span>
        <data-v-select
          :options="optionsTab"
          @selected="onTabSelect"
          style="width: 100px"
        ></data-v-select>
        <data-v-tab
          :tab_slide_width="300"
          :tab_item_width="90"
          :tabType="tabType"
          :tab_item_height="35"
        ></data-v-tab>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template slot="title">
        登录框
        <a href="JavaScript:;" class="look-code" @click="lookCode('login')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-login-box
          vcodeSrc="img/vcode.png"
          type="1"
          style="margin: 20px"
          @submit="onLoginBoxSubmit"
        ></data-v-login-box>
        <data-v-login-box
          vcodeSrc="img/vcode.png"
          type="2"
          style="margin: 20px"
          @submit="onLoginBoxSubmit"
        ></data-v-login-box>
        <data-v-login-box
          vcodeSrc="img/vcode.png"
          type="3"
          style="margin: 20px"
          @submit="onLoginBoxSubmit"
        ></data-v-login-box>
        <data-v-login-box
          vcodeSrc="img/vcode.png"
          type="4"
          style="margin: 20px"
          @submit="onLoginBoxSubmit"
        ></data-v-login-box>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template slot="title">
        通用图表
        <a href="JavaScript:;" class="look-code" @click="lookCode('chart')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-chart
          :option="chartOption"
          style="height: 400px"
        ></data-v-chart>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template slot="title">
        环状图表
        <a
          href="JavaScript:;"
          class="look-code"
          @click="lookCode('circle-chart')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-circle-chart
          style="height: 400px"
          :config="circleConfig"
        ></data-v-circle-chart>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template slot="title">
        柱形图表
        <a href="JavaScript:;" class="look-code" @click="lookCode('bar-chart')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-bar-chart
          style="height: 400px"
          :config="barConfig"
        ></data-v-bar-chart>
        <picture></picture>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template slot="title">
        面积图
        <a href="JavaScript:;" class="look-code" @click="lookCode('area-chart')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-area-chart
          style="height: 400px"
          :config="areaConfig"
        ></data-v-area-chart>
      </template>
    </data-v-panel>

    <!--
      * @params { Number } step -- 步进距离
      * @params { Boolean } isRoll -- 是否可以手动滚动 默认 false 
    -->

    <data-v-panel>
      <template slot="title">
        滚动广告牌
        <a href="JavaScript:;" class="look-code" @click="lookCode('scroll')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-scroll class="dataVsroll" :step="1" :isRoll="true">
          <div class="scroll-box-item" v-for="(item, index) in 30" :key="index">
            {{ item }}
          </div>
        </data-v-scroll>
      </template>
    </data-v-panel>
    <!--
      * @params { Number } size -- 圆尺寸
      * @params { Object } labelStyle -- 文字样式 
      * @params { Number } currentIndex -- 激活的下标
      * @params { String } keyValue -- 数组显示的关键字 
      * @params { String } lineColor--线条颜色
      * @params { String } lineActiveColor--激活线条颜色
      * @params { Array }  list -- 展示数据的数组
      * @params { String } circleBg -- 圆背景色
      * @params { String } circleActiveBg -- 圆激活背景色  
      * @params { Boolean } horizontal -- 水平排列默认 false
      * @params { Number } barSize -- 时间轴线 尺寸
    -->
    <data-v-panel>
      <template slot="title">
        时间轴
        <a href="JavaScript:;" class="look-code" @click="lookCode('timeline')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-timeline
          :list="list1"
          :size="12"
          :labelStyle="{ bottom: '10px' }"
          :currentIndex="2"
          keyValue="label"
          circleActiveBg="yellow"
          circleBg="red"
          lineActiveColor="blue"
          lineColor="#806253"
          :horizontal="true"
          :barSize="3"
        ></data-v-timeline>
      </template>
    </data-v-panel>

    <data-v-panel>
      <template slot="title">
        倒计时
        <a href="JavaScript:;" class="look-code" @click="lookCode('count-down')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-count-down :endTime="endTime"></data-v-count-down>
      </template>
    </data-v-panel>
    <data-v-panel>
      <template slot="title">
        播放栏
        <a href="JavaScript:;" class="look-code" @click="lookCode('play-bar')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-play-bar
          duration="300"
          :current.sync="current"
          :hd.sync="hd"
        ></data-v-play-bar>
      </template>
    </data-v-panel>
    <div style="" class="example-btns">
      <data-v-btn type="default" @click.native="goto('/example1')"
        >组件集合1</data-v-btn
      >
      <data-v-btn type="default" @click.native="goto('/example2')"
        >组件集合2</data-v-btn
      >
      <data-v-btn type="default" @click.native="goto('/example3')"
        >汇总数字组件集合</data-v-btn
      >
      <data-v-btn type="default" @click.native="goto('/example4')"
        >各种环形百分比组件集合</data-v-btn
      >
      <data-v-btn type="default" @click.native="goto('/example5')"
        >组件集合5</data-v-btn
      >
      <data-v-btn type="default" @click.native="goto('/example6')"
        >新闻列表</data-v-btn
      >
      <data-v-btn type="default" @click.native="goto('/example7')"
        >加载Loading</data-v-btn
      >
      <data-v-btn type="default" @click.native="goto('/example8')"
        >数字卡片集合</data-v-btn
      >
      <data-v-btn type="default" @click.native="goto('/example-menu')"
        >菜单组件集合</data-v-btn
      >
      <data-v-btn type="default" @click.native="goto('/example9')"
        >标题面板集合</data-v-btn
      >
      <data-v-btn type="default" @click.native="goto('/example-cus-bar')"
        >自定义柱状图</data-v-btn
      >
      <data-v-btn type="default" @click.native="goto('/example10')"
        >下拉组件</data-v-btn
      >
    </div>
  </div>
</template>

<script>
import CodeContainer from "./code-container.vue";
import logo from "img/logo.png";
import option from "./chart-option/option";
export default {
  name: "App",
  components: {
    CodeContainer,
  },
  data() {
    return {
      num: 1314920,
      rank: [
        { name: "add", count: 10 },
        { name: "sea", count: 6 },
        { name: "aee", count: 8 },
        { name: "yhl", count: 1 },
      ],
      logo,
      optionsHead: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      optionsTab: [1, 2, 3],
      options: ["a", "b", "c"],
      dataList: [
        { name: "aaa", num: "123", color: "red" },
        { name: "bbb", num: "456", color: "blue" },
        { name: "ccc", num: "789", color: "green" },
        { name: "ddd", num: "012", color: "purple" },
      ],
      thisCode: "",
      isShowCode: false,
      imgType: 1,
      tab_index: 0,
      tabType: 1,
      chartOption: option,
      numValue: "637.08",
      circleConfig: {
        data: [
          {
            value: 335,
            name: "Apple",
          },
          {
            value: 310,
            name: "Grapes",
          },
          {
            value: 234,
            name: "Pineapples",
          },
          {
            value: 135,
            name: "Oranges",
          },
          {
            value: 1548,
            name: "Bananas",
          },
        ],
      },
      barConfig: {
        color: ["purple", "#EBC40C", "#199CFB"],
        data: [
          {
            name: "Food",
            data: [320, 302, 301, 334, 390, 330, 320],
          },
          {
            type: "line",
            name: "Cloth",
            data: [150, 212, 201, 154, 190, 330, 410],
          },
          {
            name: "Book",
            data: [820, 832, 901, 934, 1290, 1330, 1320],
          },
        ],
      },
      areaConfig: {
        color: ["red", "#EBC40C", "#199CFB"],
        data: [
          {
            name: "Food",
            data: [
              ["2020-03-01", 320],
              ["2020-03-02", 302],
              ["2020-03-03", 301],
              ["2020-03-04", 334],
              ["2020-03-05", 390],
              ["2020-03-06", 330],
              ["2020-03-07", 320],
            ],
          },
          {
            name: "Cloth",
            data: [
              ["2020-03-01", 150],
              ["2020-03-02", 212],
              ["2020-03-03", 154],
              ["2020-03-04", 190],
              ["2020-03-05", 330],
              ["2020-03-06", 410],
              ["2020-03-07", 320],
            ],
          },
          {
            name: "Book",
            data: [
              ["2020-03-01", 820],
              ["2020-03-02", 901],
              ["2020-03-03", 924],
              ["2020-03-04", 1290],
              ["2020-03-05", 1330],
              ["2020-03-06", 1320],
              ["2020-03-07", 500],
            ],
          },
        ],
      },
      list1: [
        { label: 1, id: 1 },
        { label: 12, id: 2 },
        { label: 123, id: 3 },
        { label: 1234, id: 4 },
      ],
      endTime: +new Date("2021-09-15"),
      current: 65,
      hd: false,
    };
  },
  methods: {
    imgFunc() {
      return {};
    },
    titleFuc() {
      return {};
    },
    logoFuc() {
      return {};
    },
    onSelect(val) {
      this.imgType = val.current;
    },
    tabSelect(val) {
      this.tab_index = val;
    },
    onTabSelect(val) {
      this.tabType = val.current;
    },
    onLoginBoxSubmit(isValid, values) {
      console.log({
        isValid,
        values,
      });
    },
    lookCode(name) {
      let filePath = `./docs/${name}.md`;
      // eslint-disable-next-line no-undef
      let loading = ui.loading(2, "加载中...");
      // eslint-disable-next-line no-undef
      get(filePath).then((res) => {
        loading.hide();
        this.thisCode = res;
        this.isShowCode = true;
      });
    },
    goto(path) {
      this.$router.push({
        path: path,
      });
    },
  },
  mounted() {
    setTimeout(() => {
      this.numValue = "980,123";
    }, 5000);

    this.num_timer = setInterval(() => {
      this.num += 1;
    }, 1000);
  },

  destroyed() {
    clearInterval(this.num_timer);
  },
};
</script>

<style lang="less">
.demo {
  padding: 10px;
  background: #000;
  color: #fff;
}
.demo h1 {
  color: #fff;
}
.dataVsroll {
  height: 200px;
}
.example-btns {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
  flex-wrap: wrap;
  .c-btn {
    margin: 0;
    margin-left: 10px;
    margin-top: 10px;
  }
}
</style>
